
<style>
#title {
  color: white;
  position: relative;
  top: 120px;
  margin-bottom: 10px;
}

.form {
  background-color: white;
  position: relative;
  top: 120px;
  border-radius: 10px;
}

.container {
  background: linear-gradient(royalblue, lightblue);
  background-size: 100%;
  height: 600px;
  margin: 0;
  padding: 0;
}
</style>

<template>
  <div class="container">
    <!-- <h1>登录界面</h1> -->
    <el-row class="row-md" justify="center">
      <el-col :span="7">
        <h1 id="title">EasyBrain</h1>
      </el-col>
    </el-row>
    <el-row class="row-md" justify="center">
      <el-col :span="7">
        <div class="form">
          <br />
          <el-tabs v-model="activeName" >
            <el-tab-pane label="登录" name="first" @tab-click="tabChange1">登录</el-tab-pane>
            <el-tab-pane label="注册" name="second" @tab-click="tabChange2">注册</el-tab-pane>
          </el-tabs>
          <el-form :model="ruleForm" :rules="rules" ref="ruleFormsss" label-width="100px">
            <el-form-item label="用户" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <!-- <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" size="medium" @click="submitForm">登 录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
   
<script >
import { extend } from 'lodash';
import {
  reactive,
  ref,
  unref
} from 'vue'
import {Vue} from 'vue-class-component'
import {useRoute,useRouter}from 'vue-router';
export default class emailLogin extends Vue{
  setup() {
    const ruleFormsss = ref(null);
    // 定义变量
    const ruleForm = reactive({
      username: '',
      password: ''
    })

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ]
      
    }

    const submitForm = async () => {
      const form = unref(ruleFormsss);
      if (!form) return
      try {
        await form.validate()
        const { username, password } = ruleForm
        console.log(username, password)
      } catch (error) {
      }
    }
    return {
      ruleForm,
      rules,
      submitForm,
      ruleFormsss
    }
  }
  routes = useRoute()
  router = useRouter()
  tabChange1(){
    this.router.push({
      path:"/",
      name:"login"
    })
  }
  tabChange2(){
    this.router.push({
      path:"/register",
      name:"register"
    })
  }
}
</script>
   

